<template>
    <div class="bulkpay-select">
        <div class="bulkpay-form">
            <!-- <el-select v-model="form.shop_id" placeholder="Source" clearable @change="changeStore($event)">
                <el-option v-for="item in stores" :key="item.id" :label="item.shop_name_text" :value="item.id"></el-option>
            </el-select> -->
            <img src="@/assets/images/order/dialog-bulkpay.png" alt="">
            <strong>Bulk pay</strong>
            <UserSearchStore v-model="form.shop_id" placeholder="Source" @change="changeStore($event)" />
            <UxDatepicker :start.sync="form.time_s" :end.sync="form.time_e" @change="checkConfirm()" placeholder="Date" />
        </div>

        <div class="bulkpay-table">

            <div class="bulkpay-table-nodata" v-if="!loading && table.length == 0">
                <i class="iconfont icon-xiangqing1"></i>
                <strong>No unpaid orders</strong>
                <span>Bulk payment allows you to pay for a large number of orders at once.</span>
            </div>

            <template v-if="table.length > 0">

                <div class="table-title">
                    <p>
                        <span class="bulkpay-table-checkbox" :class="{active:select.length > 0 && select.length == table.length}" @click="setSelect()">
                            <svg-icon name="checkbox-active" />
                        </span>
                        <span>Order ID</span>
                        <span>Source</span>
                        <span>Recipient</span>
                        <span>Date</span>
                        <span>Total</span>
                    </p>
                </div>

                <ul class="table-body">
                    <li v-for="item in table" :key="item.order_code" @click="setSelect(item)">
                        <span class="bulkpay-table-checkbox" :class="{active:select.indexOf(item.order_code) >= 0}">
                            <svg-icon name="checkbox-active" />
                        </span>
                        <p v-text="item.order_code"></p>
                        <StoreIconOrder :item="item" />
                        <p class="table-name" v-text="item.first_name"></p>
                        <p class="table-time" v-text="$timeFormat(new Date(item.created_at).getTime())"></p>
                        <CommonCurrencyRate :price="item.total_money" />

                    </li>
                </ul>

            </template>

            <CommonPage v-show="form.page_total > form.page_size" @current-change="changePage($event)" :current-page.sync="form.page_num" :page-size="form.page_size" :total.sync="form.page_total"></CommonPage>

            <UxLoading2 :loading="loading" />
        </div>

        <div class="bulkpay-footbar">
            <span>Selected orders: </span>
            <em v-text="select.length"></em>
            <CommonCurrencyRate :price="totalPrice" />
            <button @click="nextStep()" type="primary" :disabled="select.length == 0">Next</button>
        </div>

        <UxDialog :visible="confirm" @close="doConfirm(false)">
            <div class="bulkpay-confirm">
                <img src="@/assets/images/order/dialog-bulkpay-change.png" alt="">
                <p>If you continue the current operation, your changes will not be saved!</p>
                <button @click="doConfirm(false)" type="primary">Cancel</button>
                <button @click="doConfirm(true)">Continue</button>
            </div>
        </UxDialog>
    </div>
</template>
<script>
export default {
    name: "OrderBulkpaySelect",

    data () {
        return {
            loading: false,
            confirm: null,
            form: {
                order_code: "",
                page_num: 1,
                page_size: 30,
                page_total: 0,
                shop_id: "",
                time_s: 0,
                time_e: 0,
                order_state: "1", // 默认中选待支付
            },
            cache: {},
            table: [],
            select: [],
        };
    },
    computed: {
        totalPrice () {
            let total = 0;
            let selectCode = Object.fromEntries(
                this.select.map((i) => [i, true])
            );
            this.table.map((item) => {
                selectCode[item.order_code] && (total += item.total_money);
            });

            // return (total / 100).toFixed(2);
            return total;
        },

    },
    methods: {
        //请求函数
        async getData () {
            this.loading = true;

            let request = {
                order_code: this.form.order_code,
                page_num: this.form.page_num,
                page_size: this.form.page_size,
                page_total: this.form.page_total,
                shop_id: this.form.shop_id,
                time_s: this.form.time_s,
                time_e: this.form.time_e,
                order_state: Number(this.form.order_state),
            };
            let response = await this.$http("Order.getOrderList", request);
            if (response.code == 0) {
                this.table = response.data.OrderList || []

                this.loading = false;
                this.form.page_total = response.total;
                this.select = [];
                this.cache = JSON.parse(JSON.stringify(this.form));
                this.$el.querySelector(".bulkpay-table").scrollTop = 0;
            } else {
                this.loading = false;
                this.$uxMessage.warning(response.msg || "error");
            }
        },

        // 改变商店
        changeStore (shop_id) {
            if (this.cache.shop_id == shop_id) {
                // 不管
            } else {
                this.form.shop_id = shop_id;
                this.checkConfirm();
            }
        },

        // 页码发生改变
        changePage (page) {
            if (page == this.cache.page_num) {
                // 不管
            } else {
                this.form.page_num = page;
                this.checkConfirm();
            }
        },

        // 是否打开确认弹窗
        checkConfirm () {
            if (this.select.length > 0) {
                this.confirm = true;
            } else {
                this.getData();
            }
        },

        // 确认修改
        doConfirm (sure) {
            if (sure) {
                this.confirm = null;
                this.getData();
            } else if (this.confirm) {
                this.cache &&
                    Object.keys(this.cache).map((key) => {
                        this.form[key] = this.cache[key];
                    });
                this.confirm = null;
            }
        },

        // 选中
        setSelect (item) {
            if (!item) {
                if (this.select.length == this.table.length) {
                    this.select = [];
                } else {
                    this.select = this.table.map((i) => i.order_code);
                }
            } else if (this.select.indexOf(item.order_code) >= 0) {
                this.select = this.select.filter((i) => i != item.order_code);
            } else {
                this.select.push(item.order_code);
            }
        },

        // 下一步
        nextStep () {
            let selectCode = Object.fromEntries(
                this.select.map((i) => [i, true])
            );
            let select = this.table.filter(
                (item) => selectCode[item.order_code]
            );

            this.$emit("select", select);
        },
    },
    created () {
        this.form.shop_id = "";
        this.form.time_s = "";
        this.form.time_e = "";
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
.bulkpay-select {
    box-sizing: border-box;
    height: calc(100vh - 80px);
    width: calc(100vw - 80px);
    min-width: 900px;
    max-width: 1100px;
    max-height: 800px;
    background: #f8f8f8;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.bulkpay-form {
    display: flex;
    align-items: center;
    padding: 32px 14px 28px;
    height: 36px;

    & > img {
        width: 28px;
        height: 28px;
    }

    & > strong {
        font-size: 28px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 32px;
        margin-left: 8px;
    }

    .user-search-store {
        width: 200px;
        height: 36px;
        margin-left: 16px;
    }

    .mx-datepicker {
        margin-left: 6px;
        width: 210px;
        height: 36px;
        &::v-deep input {
            height: 36px;
        }
    }
}

.bulkpay-table {
    padding: 0 14px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: auto;

    .table-nodata {
        padding: 120px 0;
        text-align: center;
        i {
            display: block;
            font-size: 66px;
            line-height: 70px;
            color: #d7d7d7;
        }
        span {
            display: block;
            margin-top: 24px;
            height: 16px;
            font-size: 14px;
            color: #555555;
            line-height: 16px;
        }
    }

    .table-title {
        display: flex;
        border: 1px solid #e6e6e6;
        background: #fff;
        padding: 0 10px;
        border-radius: 8px 8px 0 0;

        p {
            width: 100%;
            padding-left: 68px;
            position: relative;
            display: flex;
        }

        span {
            width: 20%;
            box-sizing: border-box;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #292929;
            line-height: 16px;
            padding: 8px 0;
            position: relative;
            padding-left: 18px;
            padding-right: 18px;
        }
    }

    .table-body {
        padding: 0 10px 10px;
        border: 1px solid #e6e6e6;
        border-radius: 0 0 8px 8px;
        background: #fff;
        border-top: none;
        display: flex;
        flex-direction: column;
        li {
            display: flex;
            margin-top: 10px;
            padding: 14px 0;
            padding-left: 68px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 16px;
            border-radius: 8px;
            position: relative;
            cursor: pointer;

            &:nth-child(2n) {
                background: #f6f6f6;
            }

            & > * {
                width: 20%;
                box-sizing: border-box;
                padding-left: 18px;
                padding-right: 18px;
            }
        }
    }

    .bulkpay-table-checkbox {
        position: absolute !important;
        box-sizing: border-box;
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        left: 28px;
        top: 50%;
        transform: translateY(-50%);
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #9e9e9e;
        cursor: pointer;
        user-select: none;
        svg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            fill: #ea4c89;
            display: none;
        }
        &.active {
            svg {
                display: block;
            }
        }
    }

    .currency-rate {
        justify-content: flex-start;
    }

    // table {
    //     width: 100%;
    //     border-collapse: collapse;
    //     border: 1px solid #ddd;
    //     border-radius: 8px;
    //     thead {
    //         th {
    //             height: 40px;
    //             font-size: 14px;
    //             font-family: Roboto-Medium, Roboto;
    //             font-weight: 500;
    //             color: #292929;
    //             line-height: 16px;
    //             border-bottom: 1px solid #e6e6e6;
    //         }
    //     }
    //     tbody {
    //         tr:nth-child(2n) {
    //             td {
    //                 background: #fafafa;
    //             }
    //         }
    //         tr:hover {
    //             td {
    //                 background: #eeeeee;
    //             }
    //         }
    //         td {
    //             white-space: nowrap;
    //             padding: 14px;
    //             line-height: 20px;
    //             text-align: center;
    //             cursor: pointer;
    //             transition: background 0.5s;

    //             .shop-name {
    //                 figure {
    //                     width: 24px;
    //                     height: 24px;
    //                     margin-right: 4px;
    //                 }
    //                 span {
    //                     line-height: 24px;
    //                     font-size: 14px;
    //                     color: #000000;
    //                     font-weight: normal;
    //                 }
    //             }
    //             .currency-rate,
    //             p {
    //                 line-height: 24px;
    //                 font-size: 14px;
    //                 color: #000000;
    //                 font-weight: normal;

    //                 &.table-name {
    //                     white-space: normal;
    //                     word-break: break-all;
    //                 }
    //             }
    //         }
    //     }
    // }
}

.common-page {
    height: 76px;
    min-height: 76px;
    justify-content: right;
}

.bulkpay-table-nodata {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #e6e6e6;
    border-radius: 8px 8px;
    background: #fff;
    margin-bottom: 14px;

    i {
        display: block;
        line-height: 60px;
        font-size: 56px;
        color: #ddd;
    }

    strong {
        margin-top: 24px;
        color: #000;
        font-size: 16px;
        text-align: center;
        white-space: pre-wrap;
    }
    span {
        margin-top: 2px;
        color: #000;
        font-size: 12px;
        line-height: 20px;
    }
}

.bulkpay-footbar {
    padding: 22px;
    line-height: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    border-radius: 0 0 12px 12px;

    span {
        font-size: 14px;
        color: #555555;
        line-height: 36px;
        height: 36px;
    }

    em {
        position: relative;
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 36px;
        margin-left: 2px;
        top: -2px;
    }

    .currency-rate {
        margin-left: 60px;
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 36px;
        &::before {
            content: 'Total:';
            margin-right: 4px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 18px;
        }
        &::v-deep span[name='unit'] {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
        }

        &::v-deep span[name='price'] {
            position: relative;
            font-size: 24px;
            color: #000;
            font-weight: normal;
            margin-left: 4px;
            top: -2px;
        }
    }

    button {
        margin-left: 60px;
        width: 138px;
        height: 36px;
    }
}

.bulkpay-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 320px;
    height: 414px;
    padding: 66px 14px 14px;
    box-sizing: border-box;
    img {
        width: 80px;
        height: 80px;
    }
    p {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
        text-align: center;
    }
    button {
        width: 100%;
        height: 40px;
        & + button {
            margin-top: 8px;
        }
    }
}
</style>
